<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=980">
<title>Html 5 - E-Commerce Page</title>
<link rel="stylesheet" type="text/css" href="styles/base.css"/>
<link rel="stylesheet" type="text/css" href="styles/global.css"/>
<link rel="stylesheet" type="text/css" href="styles/lvi.css"/>
<link rel="stylesheet" type="text/css" href="styles/products.css">
<!--[if lt IE 9]>
<script src="scripts/html5shiv.js" type="text/javascript"></script>
<![endif]-->
</head>
<body>
<div class="header-wrapper">
  <header id="site-header" class="layout">
    <section  id="site-logo"><a href="###" title="Site Name" rel="home"><span>Site Name</span></a></section>
    <hgroup class="dn">
      <h1 id="site-title">Site Name</h1>
      <h2 id="site-description">重新上路</h2>
    </hgroup>
    <nav id="secondary-nav" role="navigation">
      <ul class="clearfix">
        <li class="link"><a href="###">Nav 1</a></li>
        <li class="link"><a href="###">Nav 2</a></li>
        <li class="link "><a href="###">Nav 3</a></li>
      </ul>
    </nav>
    <nav id="primary-nav" role="navigation">
      <ul class="list clearfix">
        <li class="link"><a href="###" class="on">Nav 1</a></li>
        <li class="link"><a href="###">Nav 2</a></li>
        <li class="link"><a href="###">Nav 3</a></li>
        <li class="link"><a href="###">Nav 4</a></li>
        <li class="link"><a href="###">Nav 5</a></li>
        <li class="link"><a href="###">Nav 6</a></li>
        <li class="link"><a href="###">Nav 7</a></li>
        <li class="link"><a href="###">Nav 8</a></li>
      </ul>
    </nav>
  </header>
  <div class="header-background"></div>
</div>
<div class="page-path-wrapper layout">
  <section id="page-path"> Home<span>&gt;</span>E-Commerce </section>
</div>
<div class="main-wrapper layout">
  <div id="site-main" class="r5 pt20 clearfix">
    <nav id="category-nav" class="nav-for-product"  role="catetory"><a href="javascript:void(0);" class="nav-button"><span class="nav-title">分类导航</span></a>
      <div class=" nav-panel-wra">
        <div class="nav-panel rb5 clearfix">
          <div class="nav-triggered">
            <ul id="nav-cats" class="nav-cats-ul">
              <li id="nav-cat-0" class="nav-cat-li">价格分类</li>
              <li id="nav-cat-1" class="nav-cat-li nav-cat-split">商务公关</li>
              <li id="nav-cat-2" class="nav-cat-li">广告促销</li>
              <li id="nav-cat-3" class="nav-cat-li">会议庆典</li>
              <li id="nav-cat-4" class="nav-cat-li">工艺礼品</li>
              <li id="nav-cat-5" class="nav-cat-li">定制礼品</li>
              <li id="nav-cat-6" class="nav-cat-li">福利礼品</li>
              <li id="nav-cat-7" class="nav-cat-li">品牌礼品</li>
              <li id="nav-cat-8" class="nav-cat-li">无锡礼品</li>
              <li id="nav-cat-9" class="nav-cat-li">婚庆寿宴</li>
              <li id="nav-cat-10" class="nav-cat-li">文化礼品</li>
            </ul>
          </div>
          <div id="nav_subcats" class="nav-list">
            <div id="nav-subcats-0">
              <ul class="nav-subcat-ul">
                <li class="nav-subcat-header">价格分类</li>
                <li class="nav-subcat-li"><a href="###">Nav 1</a></li>
                <li class="nav-subcat-li"><a href="###">Nav 2</a></li>
                <li class="nav-subcat-li"><a href="###">Nav 3</a></li>
              </ul>
            </div>
            <div id="nav-subcats-1">
              <ul class="nav-subcat-ul">
                <li class="nav-subcat-header">商务公关</li>
                <li class="nav-subcat-li"><a href="###">办公用品</a></li>
                <li class="nav-subcat-li"><a href="###">工艺收藏</a></li>
                <li class="nav-subcat-li"><a href="###">中国文化</a></li>
                <li class="nav-subcat-li"><a href="###">无锡文化</a></li>
                <li class="nav-subcat-li"><a href="###">烟酒周边</a></li>
                <li class="nav-subcat-li"><a href="###">茶叶茶具</a></li>
                <li class="nav-subcat-li"><a href="###">数码产品</a></li>
                <li class="nav-subcat-li"><a href="###">其它</a></li>
              </ul>
            </div>
            <div id="nav-subcats-2">
              <ul class="nav-subcat-ul">
                <li class="nav-subcat-li"><a href="###">Nav 11</a></li>
                <li class="nav-subcat-li"><a href="###">Nav 21</a></li>
                <li class="nav-subcat-li"><a href="###">Nav 31</a></li>
              </ul>
            </div>
            <div id="nav-subcats-3">
              <ul class="nav-subcat-ul">
                <li class="nav-subcat-li"><a href="###">Nav 12</a></li>
                <li class="nav-subcat-li"><a href="###">Nav 22</a></li>
                <li class="nav-subcat-li"><a href="###">Nav 32</a></li>
              </ul>
            </div>
            <div id="nav-subcats-4">
              <ul class="nav-subcat-ul">
                <li class="nav-subcat-li"><a href="###">Nav 13</a></li>
                <li class="nav-subcat-li"><a href="###">Nav 23</a></li>
                <li class="nav-subcat-li"><a href="###">Nav 33</a></li>
              </ul>
            </div>
            <div id="nav-subcats-5">
              <ul class="nav-subcat-ul">
                <li class="nav-subcat-li"><a href="###">Nav 14</a></li>
                <li class="nav-subcat-li"><a href="###">Nav 24</a></li>
                <li class="nav-subcat-li"><a href="###">Nav 34</a></li>
              </ul>
            </div>
            <div id="nav-subcats-6">
              <ul class="nav-subcat-ul">
                <li class="nav-subcat-li"><a href="###">Nav 151</a></li>
                <li class="nav-subcat-li"><a href="###">Nav 251</a></li>
                <li class="nav-subcat-li"><a href="###">Nav 351</a></li>
              </ul>
            </div>
            <div id="nav-subcats-7">
              <ul class="nav-subcat-ul">
                <li class="nav-subcat-li"><a href="###">Nav 152</a></li>
                <li class="nav-subcat-li"><a href="###">Nav 252</a></li>
                <li class="nav-subcat-li"><a href="###">Nav 352</a></li>
              </ul>
            </div>
            <div id="nav-subcats-8">
              <ul class="nav-subcat-ul">
                <li class="nav-subcat-li"><a href="###">Nav 153</a></li>
                <li class="nav-subcat-li"><a href="###">Nav 253</a></li>
                <li class="nav-subcat-li"><a href="###">Nav 353</a></li>
              </ul>
            </div>
            <div id="nav-subcats-9">
              <ul class="nav-subcat-ul">
                <li class="nav-subcat-li"><a href="###">Nav 154</a></li>
                <li class="nav-subcat-li"><a href="###">Nav 254</a></li>
                <li class="nav-subcat-li"><a href="###">Nav 354</a></li>
              </ul>
            </div>
            <div id="nav-subcats-10">
              <ul class="nav-subcat-ul">
                <li class="nav-subcat-li"><a href="###">Nav 155</a></li>
                <li class="nav-subcat-li"><a href="###">Nav 255</a></li>
                <li class="nav-subcat-li"><a href="###">Nav 355</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </nav>
    <section class="main-search">
      <form method="get" id="search-form" action="http://www.elppa.cn/">
        <label for="s" class="assistive-text">Search</label>
        <input type="text" class="field" name="s" id="s" placeholder="Search" />
        <input type="submit" class="submit" name="submit" id="searchsubmit" value="Search" />
      </form>
      <p class="search-hot">热门关键词：<a href="###">定制藏酒</a>、<a href="###">定制衬衫</a>、<a href="###">定制丝绸</a>、<a href="###">定制礼品</a></p>
    </section>
    <div class="product-container clearfix">
      <article class="product-mian">
        <header class="product-header def-gradient ">
          <div class="product-title">吴锡礼品</div>
          <div class="product-sort def-gradient-list"><a href="###" class="first active">价格递升</a><a href="###" class="last">价格递减</a></div>
        </header>
        <section class="product-categories def-gradient-list clearfix"><a href="###" class="active">所有</a><a href="###">兴紫砂</a><a href="###">惠山泥人</a><a href="###">锡山竹刻</a><a href="###">无锡刺绣</a><a href="###">太湖翠竹</a><a href="###">宜兴红茶</a> </section>
        <ul class="product-list">
          <li class="post r5">
            <article class="post-item J-item-cover r5">
              <div class="post-pic"><a href="###" class="J-cover-img"><img class="rt3" src="images/cms/299d39e776aafe6db7724b9c35a16807.jpg" /></a></div>
              <h1 class="post-title"><a href="###">p1</a></h1>
              <div class="post-price"><span class="price-label">价格：</span>&yen;1,000</div>
            </article>
          </li>
          <li class="post r5">
            <article class="post-item J-item-cover r5">
              <div class="post-pic"><a href="###" class="J-cover-img"><img class="rt3" src="images/cms/547aef4f92296167a861181bd91d2f6a.jpg" /></a></div>
              <h1 class="post-title"><a href="###">p2</a></h1>
              <div class="post-price"><span class="price-label">价格：</span>&yen;1,000</div>
            </article>
          </li>
          <li class="post r5">
            <article class="post-item J-item-cover r5">
              <div class="post-pic"><a href="###" class="J-cover-img"><img class="rt3" src="images/cms/2f1501792cf9e5a2bc4d61ce5be7b93f.jpg" /></a></div>
              <h1 class="post-title"><a href="###">p3</a></h1>
              <div class="post-price"><span class="price-label">价格：</span>&yen;1,000</div>
            </article>
          </li>
          <li class="post r5">
            <article class="post-item J-item-cover r5">
              <div class="post-pic"><a href="###" class="J-cover-img"><img class="rt3" src="images/cms/8ba5ec8115fa8333cd79eba35038dd3b.jpg" /></a></div>
              <h1 class="post-title"><a href="###">p4</a></h1>
              <div class="post-price"><span class="price-label">价格：</span>&yen;1,000</div>
            </article>
          </li>
          <li class="post r5">
            <article class="post-item J-item-cover r5">
              <div class="post-pic"><a href="###" class="J-cover-img"><img class="rt3" src="images/cms/4ed8ef5d28ad631935b19a4f8615bcf7.jpg" /></a></div>
              <h1 class="post-title"><a href="###">p5</a></h1>
              <div class="post-price"><span class="price-label">价格：</span>&yen;1,000</div>
            </article>
          </li>
          <li class="post r5">
            <article class="post-item J-item-cover r5">
              <div class="post-pic"><a href="###" class="J-cover-img"><img class="rt3" src="images/cms/5c5e68beee56738a2a20666a4f684fe6.jpg" /></a></div>
              <h1 class="post-title"><a href="###">p6</a></h1>
              <div class="post-price"><span class="price-label">价格：</span>&yen;1,000</div>
            </article>
          </li>
          <li class="post r5">
            <article class="post-item J-item-cover r5">
              <div class="post-pic"><a href="###" class="J-cover-img"><img class="rt3" src="images/cms/83a8cb1d7d3a7568ed9e54b33df752e1.jpg" /></a></div>
              <h1 class="post-title"><a href="###">p4</a></h1>
              <div class="post-price"><span class="price-label">价格：</span>&yen;1,000</div>
            </article>
          </li>
          <li class="post r5">
            <article class="post-item J-item-cover r5">
              <div class="post-pic"><a href="###" class="J-cover-img"><img class="rt3" src="images/cms/38aaeed2ac665b38db36e75d809f4bfb.jpg" /></a></div>
              <h1 class="post-title"><a href="###">p5</a></h1>
              <div class="post-price"><span class="price-label">价格：</span>&yen;1,000</div>
            </article>
          </li>
          <li class="post r5">
            <article class="post-item J-item-cover r5">
              <div class="post-pic"><a href="###" class="J-cover-img"><img class="rt3" src="images/cms/1266c37cbfbeb30b875ee1add4a16e6c.jpg" /></a></div>
              <h1 class="post-title"><a href="###">p6</a></h1>
              <div class="post-price"><span class="price-label">价格：</span>&yen;1,000</div>
            </article>
          </li>
        </ul>
		<div class=" clear"></div>
        <footer class="product-footer">
          <div class="product-pager-wrap def-gradient">
            <div class="product-pager"> <a class="pager-prev" href="###">上一页</a>
              <div class="pager-item"><a href="###">1</a><a href="###" class="active">2</a><a href="###">3</a><a href="###">4</a><a href="###">5</a><a href="###">6</a><a href="###">7</a><a href="###">8</a><a href="###">9</a><a href="###">10</a></div>
              <a class="pager-next" href="###">下一页</a> </div>
          </div>
        </footer>
      </article>
      <aside class="product-sidebar">
        <div class="sidebar-label def-gradient"> 精品推荐 </div>
        <div class="sidebar-content">
          <ul class="sidebar-product-list">
            <li class="sidebar-product-item"><img src="images/cms/006aa3c7cc69c9a042db4275188cd866.jpg" /><span class="title"><a href="###">苹果iphone 3GS手机</a></span>
              <p class="description">让应用程序在后台随时待命，也可以将应用程序整齐纳入文件夹。</p>
              <span class="price"><span class="label">价格：</span>&yen;1,800</span> </li>
            <li class="sidebar-product-item"><img src="images/cms/83a8cb1d7d3a7568ed9e54b33df752e1.jpg" /><span class="title"><a href="###">苹果iphone 3GS手机</a></span>
              <p class="description">让应用程序在后台随时待命，也可以将应用程序整齐纳入文件夹。</p>
              <span class="price"><span class="label">价格：</span>&yen;1,800</span> </li>
            <li class="sidebar-product-item"><img src="images/cms/38aaeed2ac665b38db36e75d809f4bfb.jpg" /><span class="title"><a href="###">苹果iphone 3GS手机</a></span>
              <p class="description">让应用程序在后台随时待命，也可以将应用程序整齐纳入文件夹。</p>
              <span class="price"><span class="label">价格：</span>&yen;1,800</span> </li>
            <li class="sidebar-product-item"><img src="images/cms/32fe6ced3eaf88c930d6d62fa75b61b9.png" /><span class="title"><a href="###">苹果iphone 3GS手机</a></span>
              <p class="description">让应用程序在后台随时待命，也可以将应用程序整齐纳入文件夹。</p>
              <span class="price"><span class="label">价格：</span>&yen;1,800</span> </li>
            <li class="sidebar-product-item"><img src="images/cms/1266c37cbfbeb30b875ee1add4a16e6c.jpg" /><span class="title"><a href="###">苹果iphone 3GS手机</a></span>
              <p class="description">让应用程序在后台随时待命，也可以将应用程序整齐纳入文件夹。</p>
              <span class="price"><span class="label">价格：</span>&yen;1,800</span> </li>
            <li class="sidebar-product-item last"><img src="images/cms/006aa3c7cc69c9a042db4275188cd866.jpg" /><span class="title"><a href="###">苹果iphone 3GS手机</a></span>
              <p class="description">让应用程序在后台随时待命，也可以将应用程序整齐纳入文件夹。</p>
              <span class="price"><span class="label">价格：</span>&yen;1,800</span> </li>
          </ul>
        </div>
      </aside>
    </div>
  </div>
</div>
<div class="footer-wrapper">
  <footer id="site-footer">
    <div class="site-call-center">
      <div class="phone-number">400-800-8000</div>
      <span class="phone-title">（客服电话）</span> </div>
    <nav class="site-map layout" role="navigation">
      <div class="clearfix">
        <dl class="fl quick-links clearfix">
          <dt>快速导航</dt>
          <dd><a href="###">网站地图</a></dd>
          <dd><a href="###">站点服务</a></dd>
          <dd><a href="###">关于我们</a></dd>
          <dd><a href="###">个性定制</a></dd>
          <dd><a href="###">联系我们</a></dd>
          <dd><a href="###">礼品策划</a></dd>
          <dd><a href="###">弘尚资讯</a></dd>
          <dd><a href="###">疑问解答</a></dd>
        </dl>
        <dl class="fr customer-example clearfix">
          <dt>客户案例</dt>
          <dd><a href="#">银行篇</a></dd>
          <dd><a href="#">政府篇</a></dd>
          <dd><a href="#">企业篇</a></dd>
        </dl>
      </div>
    </nav>
    <section class="footer-copyright"> Copyright  (C) 2003-2012 </section>
  </footer>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="scripts/lvi.js"></script>
<script type="text/javascript" src="scripts/common.js"></script>
</body>
</html>
